<template>
    <div class="addClass">
        <el-card>
            <el-button type="info" size="small" icon="el-icon-arrow-left"
                @click="backToPrev">
                返回</el-button>
            <el-form size="small" class="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">选择等级</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="classLevel"
                                    placeholder="请选择分类等级" @change="choosePid">
                                    <el-option label="一级分类"
                                        value="1">一级分类</el-option>
                                    <el-option label="二级分类"
                                        value="2">二级分类</el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">名称</span>
                            </span>
                            <el-input v-model="addForm.drugTypeName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">排序</span>
                            </span>
                            <el-input v-model="addForm.sort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="classLevel == 2">
                            <span slot="label">
                                <span class="labelText">选择一级分类</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="addForm.drugTypePid"
                                    placeholder="请选择一级分类">
                                    <el-option v-for="item in drugPaList"
                                        :label="item.drugTypeName" :value="item.id"
                                        :key="item.id"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">备注</span>
                            </span>
                            <el-input v-model="addForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">显示</span>
                            </span>
                            <el-tooltip content="是否显示" placement="top">
                                <el-switch v-model="addForm.show" active-value="0"
                                    inactive-value="1">
                                </el-switch>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>
  
<script>
import dayjs from 'dayjs';
export default {
    name: '',
    data() {
        return {
            classLevel: '',
            addForm: {
                "createTime": '',
                "drugTypeName": "",
                "drugTypePid": 0,
                // "id": 0,
                "isDeleted": 0,
                "remark": "",
                "show": 0,
                "sort": '',
                "updateTime": ''
            },
            drugPaList: []
        }
    },
    components: {

    },
    methods: {
        dayjs,
        choosePid() {
            if (this.classLevel == 1) {
                this.addForm.drugTypePid = 0;
            }
            if (this.classLevel == 2) {
                this.getMedClass()
            }
        },
        async getMedClass() {
            this.addForm.drugTypePid='';
            let res = await this.$api.medicine.getMedClassList({ currentPage: 1, pageSize: 100 })
            //列表
            if (res.data.code === 200) {
                console.log(res.data.data);
                let arr = res.data.data;
                let newArr = arr.filter((item, index) => {
                    return item.drugTypePid == 0;
                });
                this.drugPaList = newArr
                console.log(this.drugPaList);
            } else {
                console.log('请求失败');
                this.tableData = []
            }
        },
        backToPrev() {
            this.$router.push('/medicine/medClassify')
        },
        cancel() {
            this.addForm = {
                "createTime": '',
                "drugTypeName": "",
                "drugTypePid": 0,
                // "id": 0,
                "isDeleted": 0,
                "remark": "",
                "show": 0,
                "sort": '',
                "updateTime": ''
            }
        },
        async onSubmit() {
            this.addForm.createTime = new Date(dayjs().format("YYYY-MM-DD HH:mm:ss"));
            console.log(this.addForm);
            let res = await this.$api.medicine.addMedicine(this.addForm);
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/medicine/medClassify')
                //提示
                this.$message({
                    message: '恭喜你，添加药品分类成功',
                    type: 'success'
                });
            } else {
                //错误信息提示
                this.$message.error('出现错误，添加分类失败');
            }
        }
    }
}
</script>

<style scoped>
.addClass {
    margin: 20px 5px 0;
}

.labelText {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

hr {
    height: 0px;
    border: 1px solid #6c7b8b;
}

.subBtn {
    text-align: center;
}

/* element样式修改 */
.choose>>>.el-select {
    display: block;
}

.dateChoose>>>.el-date-editor {
    display: block;
    width: 100%;
}

.dateChoose>>>.el-input__prefix {
    top: 17px;
}

.choose>>>.el-select .el-input__suffix {
    top: 15px;
}
</style>